/**
 * 基于canvas对象导出类，使用canvas对象初始化类后可持续修改
 */
export default class {
    context
    constructor (context: CanvasRenderingContext2D) {
        this.context = context
    }

    /**
     * 绘制圆角矩形
     * @param {number} x X轴
     * @param {number} y y轴
     * @param {number} w 宽
     * @param {number} h 高
     * @param {number} r 半径
     * @param {string} color 颜色
     */
    roundRectColor (
        x: number,
        y: number,
        w: number,
        h: number,
        r: number,
        color: string
    ) {
        this.context.save()
        this.context.fillStyle = color
        this.context.strokeStyle = color
        this.context.beginPath()
        this.context.lineJoin = 'round' // 交点设置成圆角
        this.context.lineWidth = r
        this.context.strokeRect(x + r / 2, y + r / 2, w - r, h - r)
        this.context.fillRect(x + r, y + r, w - r * 2, h - r * 2)
        this.context.stroke()
        this.context.closePath()
        this.context.clip()
        this.context.restore()
    }

    /**
     * 绘制圆形图片
     * @param {number} x X轴
     * @param {number} y y轴
     * @param {number} w 宽
     * @param {string} path 图像路径
     * @param {string} color 颜色
     */
    drawRoundImage (
        x: number,
        y: number,
        w: number,
        path: string,
        color: string
    ) {
        this.context.save()
        this.context.beginPath()
        this.context.fillStyle = color
        this.context.arc(x + w / 2, y + w / 2, w / 2, 0, Math.PI * 2, false)
        this.context.closePath()
        this.context.fill()
        this.context.clip()
        this.context.drawImage(
            (path as unknown) as CanvasImageSource,
            x,
            y,
            w,
            w
        )
        this.context.restore()
    }

    /**
     * 绘制高度裁剪图片
     * @param {number} x X轴
     * @param {number} y y轴
     * @param {number} w 宽
     * @param {number} h 高
     * @param {number} wh 图像高度
     * @param {string} path 图像路径
     */
    drawHeightCutImage (
        x: number,
        y: number,
        w: number,
        h: number,
        wh: number,
        path: string
    ) {
        console.log(x, y, w, wh, 'guysgyhusdhuyg')
        this.context.save()
        this.context.beginPath()
        this.context.rect(x, y, w, h)
        this.context.closePath()
        this.context.fill()
        this.context.clip()
        this.context.drawImage(
            (path as unknown) as CanvasImageSource,
            x,
            y,
            w,
            wh
        )
        this.context.restore()
    }

    /**
     * 绘制矩形
     * @param {number} x X轴
     * @param {number} y y轴
     * @param {number} w 宽
     * @param {number} h 高
     * @param {string} color 颜色
     */
    fillRect (x: number, y: number, w: number, h: number, color: string) {
        this.context.save()
        this.context.fillStyle = color
        this.context.fillRect(x, y, w, h)
        this.context.restore()
    }

    /**
     * 绘制文本
     * @param {string} text 文本内容
     * @param {number} x x轴
     * @param {number} y y轴
     * @param {string} color 文字颜色
     * @param {number} size 文字字号
     * @param {string} align 居中类型
     * @param {boolean} bold 是否加粗
     */
    fillText (
        text: string,
        x: number,
        y: number,
        color: string,
        size: number,
        align: 'left' | 'right' | 'center' | 'start' | 'end' = 'left',
        bold = false
    ) {
        this.context.save()
        this.context.fillStyle = color
        this.context.font =
            (bold ? 'bold ' : '') + size + 'px boldface, Songti SC'
        this.context.textAlign = align
        this.context.fillText(text, x, y)
        this.context.restore()
    }

    /**
     * 绘制需要换行的长文本
     * @param {string} str 文本内容
     * @param {number} x x轴
     * @param {number} y y轴
     * @param {number} fontNum 每行多少字
     * @param {number} row 共几行
     * @param {string} color 文本颜色
     * @param {number} size 文字大小
     */
    fillLongText (
        str: string,
        x: number,
        y: number,
        fontNum: number,
        row: number,
        color: string,
        size: number
    ) {
        str = str.replace(/[\r\n]/g, '||')
        const strArr = str.split('||')
        const arr = []
        for (const index in strArr) {
            if (Number(index) > row) {
                break
            }
            for (let i = 0, l = strArr[index].length; i < l / fontNum; i++) {
                const temporary = strArr[index].slice(
                    fontNum * i,
                    fontNum * (i + 1)
                )
                arr.push(temporary)
            }
        }
        for (let i = 0; i < row && i < arr.length; i++) {
            if (arr.length > row && i === row - 1) {
                arr[i] += '...'
            }
            this.fillText(arr[i], x, y + i * (size + 6), color, size)
        }
    }
}

export class Canvas2 {
    context = {} as CanvasRenderingContext2D
    node = {} as CanvasRenderingContext2D
    elem = {} as HTMLElement
    constructor (id: string) {
        uni.createSelectorQuery()
            .select(id)
            .fields(
                {
                    size: true
                },
                () => ''
            )
            .exec(async ele => {
                ele = ele[0]
                const width = ele.width
                const height = ele.height
                const dpr = uni.getSystemInfoSync().pixelRatio
                ele.node.width = width * dpr
                ele.node.height = height * dpr
                this.context = ele.node.getContext('2d')
                this.context.scale(dpr, dpr)
                this.node = ele.node
                this.elem = ele
            })
    }

    /**
     * 绘制圆角矩形
     * @param {number} x X轴
     * @param {number} y y轴
     * @param {number} w 宽
     * @param {number} h 高
     * @param {number} r 半径
     * @param {string} color 颜色
     */
    roundRectColor (
        x: number,
        y: number,
        w: number,
        h: number,
        r: number,
        color: string
    ) {
        this.context.save()
        this.context.fillStyle = color
        this.context.strokeStyle = color
        this.context.beginPath()
        this.context.lineJoin = 'round' // 交点设置成圆角
        this.context.lineWidth = r
        this.context.strokeRect(x + r / 2, y + r / 2, w - r, h - r)
        this.context.fillRect(x + r, y + r, w - r * 2, h - r * 2)
        this.context.stroke()
        this.context.closePath()
        this.context.clip()
        this.context.restore()
    }

    /**
     * 绘制圆形图片
     * @param {number} x X轴
     * @param {number} y y轴
     * @param {number} w 宽
     * @param {string} path 图像路径
     * @param {string} color 颜色
     */
    drawRoundImage (
        x: number,
        y: number,
        w: number,
        path: string,
        color: string
    ) {
        return new Promise(resolve => {
            const img = (this.node as any).createImage()
            img.src = path
            img.onload = () => {
                this.context.save()
                this.context.beginPath()
                this.context.fillStyle = color
                this.context.arc(
                    x + w / 2,
                    y + w / 2,
                    w / 2,
                    0,
                    Math.PI * 2,
                    false
                )
                this.context.closePath()
                this.context.fill()
                this.context.clip()
                this.context.drawImage(img, x, y, w, w)
                this.context.restore()
                resolve(undefined)
            }
        })
    }

    /**
     * 绘制高度裁剪图片
     * @param {number} x X轴
     * @param {number} y y轴
     * @param {number} w 宽
     * @param {number} h 高
     * @param {number} wh 图像高度
     * @param {string} path 图像路径
     */
    drawHeightCutImage (
        x: number,
        y: number,
        w: number,
        h: number,
        wh: number,
        path: string
    ) {
        return new Promise(resolve => {
            const img = (this.node as any).createImage()
            img.src = path
            img.onload = () => {
                this.context.save()
                this.context.beginPath()
                this.context.rect(x, y, w, h)
                this.context.closePath()
                this.context.fill()
                this.context.clip()
                this.context.drawImage(img, x, y, w, wh)
                this.context.restore()
                resolve(undefined)
            }
        })
    }

    /**
     * 绘制矩形
     * @param {number} x X轴
     * @param {number} y y轴
     * @param {number} w 宽
     * @param {number} h 高
     * @param {string} color 颜色
     */
    fillRect (x: number, y: number, w: number, h: number, color: string) {
        this.context.save()
        this.context.fillStyle = color
        this.context.fillRect(x, y, w, h)
        this.context.restore()
    }

    /**
     * 绘制文本
     * @param {string} text 文本内容
     * @param {number} x x轴
     * @param {number} y y轴
     * @param {string} color 文字颜色
     * @param {number} size 文字字号
     * @param {string} align 居中类型
     * @param {boolean} bold 是否加粗
     */
    fillText (
        text: string,
        x: number,
        y: number,
        color: string,
        size: number,
        align: 'left' | 'right' | 'center' | 'start' | 'end' = 'left',
        bold = false
    ) {
        this.context.save()
        this.context.fillStyle = color
        this.context.font =
            (bold ? 'bold ' : '') + size + 'px boldface, Songti SC'
        this.context.textAlign = align
        this.context.fillText(text, x, y)
        this.context.restore()
    }

    /**
     * 绘制需要换行的长文本
     * @param {string} str 文本内容
     * @param {number} x x轴
     * @param {number} y y轴
     * @param {number} fontNum 每行多少字
     * @param {number} row 共几行
     * @param {string} color 文本颜色
     * @param {number} size 文字大小
     */
    fillLongText (
        str: string,
        x: number,
        y: number,
        fontNum: number,
        row: number,
        color: string,
        size: number
    ) {
        str = str.replace(/[\r\n]/g, '||')
        const strArr = str.split('||')
        const arr = []
        for (const index in strArr) {
            if (Number(index) > row) {
                break
            }
            for (let i = 0, l = strArr[index].length; i < l / fontNum; i++) {
                const temporary = strArr[index].slice(
                    fontNum * i,
                    fontNum * (i + 1)
                )
                arr.push(temporary)
            }
        }
        for (let i = 0; i < row && i < arr.length; i++) {
            if (arr.length > row && i === row - 1) {
                arr[i] += '...'
            }
            this.fillText(arr[i], x, y + i * (size + 6), color, size)
        }
    }
}
